<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3756580" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">家庭</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">设备详情</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">通知管理</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7da;</span>
                <div class="name">通知 3</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">家庭用户</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">订阅</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">设备</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">设置-2</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">设备</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">加</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">减去</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">手机绑定</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">微信绑定</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">配置</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">icon_unit</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">注销</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">组织</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">施工单位</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">机构管理</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">门磁</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe91b;</span>
                <div class="name">人体红外</div>
                <div class="code-name">&amp;#xe91b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">烟感</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebb7;</span>
                <div class="name">设备管理</div>
                <div class="code-name">&amp;#xebb7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">热水器</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec3b;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xec3b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">短信</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">通话</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">余额</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">手机号</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">微信登录</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">手机号</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">插号</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">下一级</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">更换</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">时间轴</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">卡片</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">该时段暂无录像</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">播放中</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">播放中</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fa;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe7fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">同意</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">点播回放</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe968;</span>
                <div class="name">相机,截图,截屏,拍照</div>
                <div class="code-name">&amp;#xe968;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">指令下发</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">更换岗位</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">视频监控</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">视频监控</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">历史记录</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">核心局平面图</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">告警记录</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">业主 开发商</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">问号</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">结束时间</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">事件回放</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">工单_未选中</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">管理员</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">HTSCIT_完成</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec37;</span>
                <div class="name">工单</div>
                <div class="code-name">&amp;#xec37;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">隐患排查治理</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x100d9;</span>
                <div class="name">审核</div>
                <div class="code-name">&amp;#x100d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">去除、禁止</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c4;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">audio</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">详情</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">导航图标</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">标点、地点_2</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">拨打电话_01</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">切片截图</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b2;</span>
                <div class="name">音量</div>
                <div class="code-name">&amp;#xe8b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b3;</span>
                <div class="name">音量</div>
                <div class="code-name">&amp;#xe8b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x10100;</span>
                <div class="name">增大音量</div>
                <div class="code-name">&amp;#x10100;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#x10101;</span>
                <div class="name">关闭音量</div>
                <div class="code-name">&amp;#x10101;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea6e;</span>
                <div class="name">24gl-playCircle</div>
                <div class="code-name">&amp;#xea6e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">下箭头</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">设备组</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">下发</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">编辑-3</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">布防</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">撤防</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">关注</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">减少减去减号</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">加入班级</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">客户服务  客服</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">团队</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">开始时间</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bb;</span>
                <div class="name">房子3</div>
                <div class="code-name">&amp;#xe8bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">楼宇</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">多楼层</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">绑定手机</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c0;</span>
                <div class="name">211铃铛-线性</div>
                <div class="code-name">&amp;#xe8c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe945;</span>
                <div class="name">公众号</div>
                <div class="code-name">&amp;#xe945;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">重置密码</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">电话呼叫</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">icon-person-renwu</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">de-isolation</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">tab_开门_02</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">tab_开门_04</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">离线</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">在线</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">列表切换</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">筛选</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1745918930376'); /* IE9 */
  src: url('iconfont.eot?t=1745918930376#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1745918930376') format('woff'),
       url('iconfont.ttf?t=1745918930376') format('truetype'),
       url('iconfont.svg?t=1745918930376#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-smartjiating"></span>
            <div class="name">
              家庭
            </div>
            <div class="code-name">.icon-smartjiating
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttongzhi1"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-smarttongzhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartziyuanxhdpi"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.icon-smartziyuanxhdpi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshebeixiangqing"></span>
            <div class="name">
              设备详情
            </div>
            <div class="code-name">.icon-smartshebeixiangqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartbianji1"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-smartbianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttongzhiguanli"></span>
            <div class="name">
              通知管理
            </div>
            <div class="code-name">.icon-smarttongzhiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarta-tongzhi3"></span>
            <div class="name">
              通知 3
            </div>
            <div class="code-name">.icon-smarta-tongzhi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartjiatingyonghu"></span>
            <div class="name">
              家庭用户
            </div>
            <div class="code-name">.icon-smartjiatingyonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartdingyue2"></span>
            <div class="name">
              订阅
            </div>
            <div class="code-name">.icon-smartdingyue2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshebei1"></span>
            <div class="name">
              设备
            </div>
            <div class="code-name">.icon-smartshebei1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshezhi-2"></span>
            <div class="name">
              设置-2
            </div>
            <div class="code-name">.icon-smartshezhi-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshebei"></span>
            <div class="name">
              设备
            </div>
            <div class="code-name">.icon-smartshebei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-smartshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartjia"></span>
            <div class="name">
              加
            </div>
            <div class="code-name">.icon-smartjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartjianqu"></span>
            <div class="name">
              减去
            </div>
            <div class="code-name">.icon-smartjianqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshoujibangding1"></span>
            <div class="name">
              手机绑定
            </div>
            <div class="code-name">.icon-smartshoujibangding1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartweixinbangding1"></span>
            <div class="name">
              微信绑定
            </div>
            <div class="code-name">.icon-smartweixinbangding1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshouye1"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-smartshouye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarthome"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-smarthome
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartpeizhi1"></span>
            <div class="name">
              配置
            </div>
            <div class="code-name">.icon-smartpeizhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarticon_unit"></span>
            <div class="name">
              icon_unit
            </div>
            <div class="code-name">.icon-smarticon_unit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartzhuxiao1"></span>
            <div class="name">
              注销
            </div>
            <div class="code-name">.icon-smartzhuxiao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartditu2"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.icon-smartditu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartzuzhi"></span>
            <div class="name">
              组织
            </div>
            <div class="code-name">.icon-smartzuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartloufang"></span>
            <div class="name">
              施工单位
            </div>
            <div class="code-name">.icon-smartloufang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartjigouguanli"></span>
            <div class="name">
              机构管理
            </div>
            <div class="code-name">.icon-smartjigouguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartmenci"></span>
            <div class="name">
              门磁
            </div>
            <div class="code-name">.icon-smartmenci
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartrentihongwai"></span>
            <div class="name">
              人体红外
            </div>
            <div class="code-name">.icon-smartrentihongwai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartyangan"></span>
            <div class="name">
              烟感
            </div>
            <div class="code-name">.icon-smartyangan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshebeiguanli2"></span>
            <div class="name">
              设备管理
            </div>
            <div class="code-name">.icon-smartshebeiguanli2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartreshuiqi"></span>
            <div class="name">
              热水器
            </div>
            <div class="code-name">.icon-smartreshuiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartxiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-smartxiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartduanxin"></span>
            <div class="name">
              短信
            </div>
            <div class="code-name">.icon-smartduanxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttonghua"></span>
            <div class="name">
              通话
            </div>
            <div class="code-name">.icon-smarttonghua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartyue"></span>
            <div class="name">
              余额
            </div>
            <div class="code-name">.icon-smartyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartyonghu1"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-smartyonghu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartmobile"></span>
            <div class="name">
              手机号
            </div>
            <div class="code-name">.icon-smartmobile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartweixindenglu"></span>
            <div class="name">
              微信登录
            </div>
            <div class="code-name">.icon-smartweixindenglu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartweixin2"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-smartweixin2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshoujihao"></span>
            <div class="name">
              手机号
            </div>
            <div class="code-name">.icon-smartshoujihao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartyonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-smartyonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartweixin1"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-smartweixin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartchahao"></span>
            <div class="name">
              插号
            </div>
            <div class="code-name">.icon-smartchahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartxiayiji"></span>
            <div class="name">
              下一级
            </div>
            <div class="code-name">.icon-smartxiayiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartgenghuan"></span>
            <div class="name">
              更换
            </div>
            <div class="code-name">.icon-smartgenghuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttimeAxis"></span>
            <div class="name">
              时间轴
            </div>
            <div class="code-name">.icon-smarttimeAxis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartkapian"></span>
            <div class="name">
              卡片
            </div>
            <div class="code-name">.icon-smartkapian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartgaishiduanzanwuluxiang"></span>
            <div class="name">
              该时段暂无录像
            </div>
            <div class="code-name">.icon-smartgaishiduanzanwuluxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartbofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-smartbofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartbofangzhong"></span>
            <div class="name">
              播放中
            </div>
            <div class="code-name">.icon-smartbofangzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartbofangzhong1"></span>
            <div class="name">
              播放中
            </div>
            <div class="code-name">.icon-smartbofangzhong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartcuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-smartcuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttubiao-gou"></span>
            <div class="name">
              同意
            </div>
            <div class="code-name">.icon-smarttubiao-gou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartdianbohuifang"></span>
            <div class="name">
              点播回放
            </div>
            <div class="code-name">.icon-smartdianbohuifang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartcamera"></span>
            <div class="name">
              相机,截图,截屏,拍照
            </div>
            <div class="code-name">.icon-smartcamera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartzhilingxiafa"></span>
            <div class="name">
              指令下发
            </div>
            <div class="code-name">.icon-smartzhilingxiafa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartgenghuangangwei"></span>
            <div class="name">
              更换岗位
            </div>
            <div class="code-name">.icon-smartgenghuangangwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshipinjiankong"></span>
            <div class="name">
              视频监控
            </div>
            <div class="code-name">.icon-smartshipinjiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshipinjiankong1"></span>
            <div class="name">
              视频监控
            </div>
            <div class="code-name">.icon-smartshipinjiankong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartlishijilu1"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.icon-smartlishijilu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartlishijilu"></span>
            <div class="name">
              历史记录
            </div>
            <div class="code-name">.icon-smartlishijilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarthexinjupingmiantu"></span>
            <div class="name">
              核心局平面图
            </div>
            <div class="code-name">.icon-smarthexinjupingmiantu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartgaojingjilu"></span>
            <div class="name">
              告警记录
            </div>
            <div class="code-name">.icon-smartgaojingjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartyezhukaifashang"></span>
            <div class="name">
              业主 开发商
            </div>
            <div class="code-name">.icon-smartyezhukaifashang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartwenhao"></span>
            <div class="name">
              问号
            </div>
            <div class="code-name">.icon-smartwenhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartjieshushijian1"></span>
            <div class="name">
              结束时间
            </div>
            <div class="code-name">.icon-smartjieshushijian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-smartshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshijianhuifang"></span>
            <div class="name">
              事件回放
            </div>
            <div class="code-name">.icon-smartshijianhuifang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartgongdan_weixuanzhong"></span>
            <div class="name">
              工单_未选中
            </div>
            <div class="code-name">.icon-smartgongdan_weixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartguanliyuan"></span>
            <div class="name">
              管理员
            </div>
            <div class="code-name">.icon-smartguanliyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartwancheng"></span>
            <div class="name">
              HTSCIT_完成
            </div>
            <div class="code-name">.icon-smartwancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartgongdan"></span>
            <div class="name">
              工单
            </div>
            <div class="code-name">.icon-smartgongdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartyinhuanpaichazhili"></span>
            <div class="name">
              隐患排查治理
            </div>
            <div class="code-name">.icon-smartyinhuanpaichazhili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshenhe"></span>
            <div class="name">
              审核
            </div>
            <div class="code-name">.icon-smartshenhe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartquchujinzhi"></span>
            <div class="name">
              去除、禁止
            </div>
            <div class="code-name">.icon-smartquchujinzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-smarttianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartaudio"></span>
            <div class="name">
              audio
            </div>
            <div class="code-name">.icon-smartaudio
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarticon-smartxiangqing"></span>
            <div class="name">
              详情
            </div>
            <div class="code-name">.icon-smarticon-smartxiangqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartdaohangtubiao"></span>
            <div class="name">
              导航图标
            </div>
            <div class="code-name">.icon-smartdaohangtubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartbiaodiandidian_"></span>
            <div class="name">
              标点、地点_2
            </div>
            <div class="code-name">.icon-smartbiaodiandidian_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartbodadianhua_"></span>
            <div class="name">
              拨打电话_01
            </div>
            <div class="code-name">.icon-smartbodadianhua_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartqiepianjietu"></span>
            <div class="name">
              切片截图
            </div>
            <div class="code-name">.icon-smartqiepianjietu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarthuatong"></span>
            <div class="name">
              音量
            </div>
            <div class="code-name">.icon-smarthuatong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarthuatong1"></span>
            <div class="name">
              音量
            </div>
            <div class="code-name">.icon-smarthuatong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartzengdayinliang"></span>
            <div class="name">
              增大音量
            </div>
            <div class="code-name">.icon-smartzengdayinliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartguanbiyinliang"></span>
            <div class="name">
              关闭音量
            </div>
            <div class="code-name">.icon-smartguanbiyinliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartzanting"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.icon-smartzanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smart24gl-playCircle"></span>
            <div class="name">
              24gl-playCircle
            </div>
            <div class="code-name">.icon-smart24gl-playCircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartsanjiaodown"></span>
            <div class="name">
              下箭头
            </div>
            <div class="code-name">.icon-smartsanjiaodown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartsanjiaoleft"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-smartsanjiaoleft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartsanjiaoright"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-smartsanjiaoright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshebeizu"></span>
            <div class="name">
              设备组
            </div>
            <div class="code-name">.icon-smartshebeizu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartxiafa"></span>
            <div class="name">
              下发
            </div>
            <div class="code-name">.icon-smartxiafa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-smartshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartbianji-3"></span>
            <div class="name">
              编辑-3
            </div>
            <div class="code-name">.icon-smartbianji-3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartbufang"></span>
            <div class="name">
              布防
            </div>
            <div class="code-name">.icon-smartbufang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartchefang"></span>
            <div class="name">
              撤防
            </div>
            <div class="code-name">.icon-smartchefang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartguanzhu"></span>
            <div class="name">
              关注
            </div>
            <div class="code-name">.icon-smartguanzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartjianshaojianqujianhao"></span>
            <div class="name">
              减少减去减号
            </div>
            <div class="code-name">.icon-smartjianshaojianqujianhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartjiarubanji"></span>
            <div class="name">
              加入班级
            </div>
            <div class="code-name">.icon-smartjiarubanji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartkehufuwukefu"></span>
            <div class="name">
              客户服务  客服
            </div>
            <div class="code-name">.icon-smartkehufuwukefu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttuandui"></span>
            <div class="name">
              团队
            </div>
            <div class="code-name">.icon-smarttuandui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartcopy"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.icon-smartcopy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartkaishishijian1"></span>
            <div class="name">
              开始时间
            </div>
            <div class="code-name">.icon-smartkaishishijian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartfangzi3"></span>
            <div class="name">
              房子3
            </div>
            <div class="code-name">.icon-smartfangzi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartUIsheji_menjinxitong-20"></span>
            <div class="name">
              楼宇
            </div>
            <div class="code-name">.icon-smartUIsheji_menjinxitong-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartlouceng0"></span>
            <div class="name">
              多楼层
            </div>
            <div class="code-name">.icon-smartlouceng0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartweixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-smartweixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartai-bind-cel"></span>
            <div class="name">
              绑定手机
            </div>
            <div class="code-name">.icon-smartai-bind-cel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartlingdang-xianxing"></span>
            <div class="name">
              211铃铛-线性
            </div>
            <div class="code-name">.icon-smartlingdang-xianxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartexe-public-address-primary"></span>
            <div class="name">
              公众号
            </div>
            <div class="code-name">.icon-smartexe-public-address-primary
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartzhongzhimima"></span>
            <div class="name">
              重置密码
            </div>
            <div class="code-name">.icon-smartzhongzhimima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttianchongxing-"></span>
            <div class="name">
              电话呼叫
            </div>
            <div class="code-name">.icon-smarttianchongxing-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarticon-person-renwu"></span>
            <div class="name">
              icon-person-renwu
            </div>
            <div class="code-name">.icon-smarticon-person-renwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartde-isolation"></span>
            <div class="name">
              de-isolation
            </div>
            <div class="code-name">.icon-smartde-isolation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttabtubiao-"></span>
            <div class="name">
              tab_开门_02
            </div>
            <div class="code-name">.icon-smarttabtubiao-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smarttabtubiao-1"></span>
            <div class="name">
              tab_开门_04
            </div>
            <div class="code-name">.icon-smarttabtubiao-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartlixian"></span>
            <div class="name">
              离线
            </div>
            <div class="code-name">.icon-smartlixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartzaixian"></span>
            <div class="name">
              在线
            </div>
            <div class="code-name">.icon-smartzaixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartliebiaoqiehuan"></span>
            <div class="name">
              列表切换
            </div>
            <div class="code-name">.icon-smartliebiaoqiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smartshaixuan1"></span>
            <div class="name">
              筛选
            </div>
            <div class="code-name">.icon-smartshaixuan1
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-smartxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartjiating"></use>
                </svg>
                <div class="name">家庭</div>
                <div class="code-name">#icon-smartjiating</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttongzhi1"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-smarttongzhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartziyuanxhdpi"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#icon-smartziyuanxhdpi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshebeixiangqing"></use>
                </svg>
                <div class="name">设备详情</div>
                <div class="code-name">#icon-smartshebeixiangqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartbianji1"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-smartbianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttongzhiguanli"></use>
                </svg>
                <div class="name">通知管理</div>
                <div class="code-name">#icon-smarttongzhiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarta-tongzhi3"></use>
                </svg>
                <div class="name">通知 3</div>
                <div class="code-name">#icon-smarta-tongzhi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartjiatingyonghu"></use>
                </svg>
                <div class="name">家庭用户</div>
                <div class="code-name">#icon-smartjiatingyonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartdingyue2"></use>
                </svg>
                <div class="name">订阅</div>
                <div class="code-name">#icon-smartdingyue2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshebei1"></use>
                </svg>
                <div class="name">设备</div>
                <div class="code-name">#icon-smartshebei1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshezhi-2"></use>
                </svg>
                <div class="name">设置-2</div>
                <div class="code-name">#icon-smartshezhi-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshebei"></use>
                </svg>
                <div class="name">设备</div>
                <div class="code-name">#icon-smartshebei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-smartshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartjia"></use>
                </svg>
                <div class="name">加</div>
                <div class="code-name">#icon-smartjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartjianqu"></use>
                </svg>
                <div class="name">减去</div>
                <div class="code-name">#icon-smartjianqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshoujibangding1"></use>
                </svg>
                <div class="name">手机绑定</div>
                <div class="code-name">#icon-smartshoujibangding1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartweixinbangding1"></use>
                </svg>
                <div class="name">微信绑定</div>
                <div class="code-name">#icon-smartweixinbangding1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshouye1"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-smartshouye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarthome"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-smarthome</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartpeizhi1"></use>
                </svg>
                <div class="name">配置</div>
                <div class="code-name">#icon-smartpeizhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarticon_unit"></use>
                </svg>
                <div class="name">icon_unit</div>
                <div class="code-name">#icon-smarticon_unit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartzhuxiao1"></use>
                </svg>
                <div class="name">注销</div>
                <div class="code-name">#icon-smartzhuxiao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartditu2"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#icon-smartditu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartzuzhi"></use>
                </svg>
                <div class="name">组织</div>
                <div class="code-name">#icon-smartzuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartloufang"></use>
                </svg>
                <div class="name">施工单位</div>
                <div class="code-name">#icon-smartloufang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartjigouguanli"></use>
                </svg>
                <div class="name">机构管理</div>
                <div class="code-name">#icon-smartjigouguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartmenci"></use>
                </svg>
                <div class="name">门磁</div>
                <div class="code-name">#icon-smartmenci</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartrentihongwai"></use>
                </svg>
                <div class="name">人体红外</div>
                <div class="code-name">#icon-smartrentihongwai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartyangan"></use>
                </svg>
                <div class="name">烟感</div>
                <div class="code-name">#icon-smartyangan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshebeiguanli2"></use>
                </svg>
                <div class="name">设备管理</div>
                <div class="code-name">#icon-smartshebeiguanli2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartreshuiqi"></use>
                </svg>
                <div class="name">热水器</div>
                <div class="code-name">#icon-smartreshuiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartxiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-smartxiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartduanxin"></use>
                </svg>
                <div class="name">短信</div>
                <div class="code-name">#icon-smartduanxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttonghua"></use>
                </svg>
                <div class="name">通话</div>
                <div class="code-name">#icon-smarttonghua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartyue"></use>
                </svg>
                <div class="name">余额</div>
                <div class="code-name">#icon-smartyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartyonghu1"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-smartyonghu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartmobile"></use>
                </svg>
                <div class="name">手机号</div>
                <div class="code-name">#icon-smartmobile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartweixindenglu"></use>
                </svg>
                <div class="name">微信登录</div>
                <div class="code-name">#icon-smartweixindenglu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartweixin2"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-smartweixin2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshoujihao"></use>
                </svg>
                <div class="name">手机号</div>
                <div class="code-name">#icon-smartshoujihao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartyonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-smartyonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartweixin1"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-smartweixin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartchahao"></use>
                </svg>
                <div class="name">插号</div>
                <div class="code-name">#icon-smartchahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartxiayiji"></use>
                </svg>
                <div class="name">下一级</div>
                <div class="code-name">#icon-smartxiayiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartgenghuan"></use>
                </svg>
                <div class="name">更换</div>
                <div class="code-name">#icon-smartgenghuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttimeAxis"></use>
                </svg>
                <div class="name">时间轴</div>
                <div class="code-name">#icon-smarttimeAxis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartkapian"></use>
                </svg>
                <div class="name">卡片</div>
                <div class="code-name">#icon-smartkapian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartgaishiduanzanwuluxiang"></use>
                </svg>
                <div class="name">该时段暂无录像</div>
                <div class="code-name">#icon-smartgaishiduanzanwuluxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartbofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-smartbofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartbofangzhong"></use>
                </svg>
                <div class="name">播放中</div>
                <div class="code-name">#icon-smartbofangzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartbofangzhong1"></use>
                </svg>
                <div class="name">播放中</div>
                <div class="code-name">#icon-smartbofangzhong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartcuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-smartcuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttubiao-gou"></use>
                </svg>
                <div class="name">同意</div>
                <div class="code-name">#icon-smarttubiao-gou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartdianbohuifang"></use>
                </svg>
                <div class="name">点播回放</div>
                <div class="code-name">#icon-smartdianbohuifang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartcamera"></use>
                </svg>
                <div class="name">相机,截图,截屏,拍照</div>
                <div class="code-name">#icon-smartcamera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartzhilingxiafa"></use>
                </svg>
                <div class="name">指令下发</div>
                <div class="code-name">#icon-smartzhilingxiafa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartgenghuangangwei"></use>
                </svg>
                <div class="name">更换岗位</div>
                <div class="code-name">#icon-smartgenghuangangwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshipinjiankong"></use>
                </svg>
                <div class="name">视频监控</div>
                <div class="code-name">#icon-smartshipinjiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshipinjiankong1"></use>
                </svg>
                <div class="name">视频监控</div>
                <div class="code-name">#icon-smartshipinjiankong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartlishijilu1"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#icon-smartlishijilu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartlishijilu"></use>
                </svg>
                <div class="name">历史记录</div>
                <div class="code-name">#icon-smartlishijilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarthexinjupingmiantu"></use>
                </svg>
                <div class="name">核心局平面图</div>
                <div class="code-name">#icon-smarthexinjupingmiantu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartgaojingjilu"></use>
                </svg>
                <div class="name">告警记录</div>
                <div class="code-name">#icon-smartgaojingjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartyezhukaifashang"></use>
                </svg>
                <div class="name">业主 开发商</div>
                <div class="code-name">#icon-smartyezhukaifashang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartwenhao"></use>
                </svg>
                <div class="name">问号</div>
                <div class="code-name">#icon-smartwenhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartjieshushijian1"></use>
                </svg>
                <div class="name">结束时间</div>
                <div class="code-name">#icon-smartjieshushijian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-smartshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshijianhuifang"></use>
                </svg>
                <div class="name">事件回放</div>
                <div class="code-name">#icon-smartshijianhuifang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartgongdan_weixuanzhong"></use>
                </svg>
                <div class="name">工单_未选中</div>
                <div class="code-name">#icon-smartgongdan_weixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartguanliyuan"></use>
                </svg>
                <div class="name">管理员</div>
                <div class="code-name">#icon-smartguanliyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartwancheng"></use>
                </svg>
                <div class="name">HTSCIT_完成</div>
                <div class="code-name">#icon-smartwancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartgongdan"></use>
                </svg>
                <div class="name">工单</div>
                <div class="code-name">#icon-smartgongdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartyinhuanpaichazhili"></use>
                </svg>
                <div class="name">隐患排查治理</div>
                <div class="code-name">#icon-smartyinhuanpaichazhili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshenhe"></use>
                </svg>
                <div class="name">审核</div>
                <div class="code-name">#icon-smartshenhe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartquchujinzhi"></use>
                </svg>
                <div class="name">去除、禁止</div>
                <div class="code-name">#icon-smartquchujinzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-smarttianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartaudio"></use>
                </svg>
                <div class="name">audio</div>
                <div class="code-name">#icon-smartaudio</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarticon-smartxiangqing"></use>
                </svg>
                <div class="name">详情</div>
                <div class="code-name">#icon-smarticon-smartxiangqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartdaohangtubiao"></use>
                </svg>
                <div class="name">导航图标</div>
                <div class="code-name">#icon-smartdaohangtubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartbiaodiandidian_"></use>
                </svg>
                <div class="name">标点、地点_2</div>
                <div class="code-name">#icon-smartbiaodiandidian_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartbodadianhua_"></use>
                </svg>
                <div class="name">拨打电话_01</div>
                <div class="code-name">#icon-smartbodadianhua_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartqiepianjietu"></use>
                </svg>
                <div class="name">切片截图</div>
                <div class="code-name">#icon-smartqiepianjietu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarthuatong"></use>
                </svg>
                <div class="name">音量</div>
                <div class="code-name">#icon-smarthuatong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarthuatong1"></use>
                </svg>
                <div class="name">音量</div>
                <div class="code-name">#icon-smarthuatong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartzengdayinliang"></use>
                </svg>
                <div class="name">增大音量</div>
                <div class="code-name">#icon-smartzengdayinliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartguanbiyinliang"></use>
                </svg>
                <div class="name">关闭音量</div>
                <div class="code-name">#icon-smartguanbiyinliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartzanting"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#icon-smartzanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smart24gl-playCircle"></use>
                </svg>
                <div class="name">24gl-playCircle</div>
                <div class="code-name">#icon-smart24gl-playCircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartsanjiaodown"></use>
                </svg>
                <div class="name">下箭头</div>
                <div class="code-name">#icon-smartsanjiaodown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartsanjiaoleft"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-smartsanjiaoleft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartsanjiaoright"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-smartsanjiaoright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshebeizu"></use>
                </svg>
                <div class="name">设备组</div>
                <div class="code-name">#icon-smartshebeizu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartxiafa"></use>
                </svg>
                <div class="name">下发</div>
                <div class="code-name">#icon-smartxiafa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-smartshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartbianji-3"></use>
                </svg>
                <div class="name">编辑-3</div>
                <div class="code-name">#icon-smartbianji-3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartbufang"></use>
                </svg>
                <div class="name">布防</div>
                <div class="code-name">#icon-smartbufang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartchefang"></use>
                </svg>
                <div class="name">撤防</div>
                <div class="code-name">#icon-smartchefang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartguanzhu"></use>
                </svg>
                <div class="name">关注</div>
                <div class="code-name">#icon-smartguanzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartjianshaojianqujianhao"></use>
                </svg>
                <div class="name">减少减去减号</div>
                <div class="code-name">#icon-smartjianshaojianqujianhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartjiarubanji"></use>
                </svg>
                <div class="name">加入班级</div>
                <div class="code-name">#icon-smartjiarubanji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartkehufuwukefu"></use>
                </svg>
                <div class="name">客户服务  客服</div>
                <div class="code-name">#icon-smartkehufuwukefu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttuandui"></use>
                </svg>
                <div class="name">团队</div>
                <div class="code-name">#icon-smarttuandui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartcopy"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#icon-smartcopy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartkaishishijian1"></use>
                </svg>
                <div class="name">开始时间</div>
                <div class="code-name">#icon-smartkaishishijian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartfangzi3"></use>
                </svg>
                <div class="name">房子3</div>
                <div class="code-name">#icon-smartfangzi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartUIsheji_menjinxitong-20"></use>
                </svg>
                <div class="name">楼宇</div>
                <div class="code-name">#icon-smartUIsheji_menjinxitong-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartlouceng0"></use>
                </svg>
                <div class="name">多楼层</div>
                <div class="code-name">#icon-smartlouceng0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartweixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-smartweixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartai-bind-cel"></use>
                </svg>
                <div class="name">绑定手机</div>
                <div class="code-name">#icon-smartai-bind-cel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartlingdang-xianxing"></use>
                </svg>
                <div class="name">211铃铛-线性</div>
                <div class="code-name">#icon-smartlingdang-xianxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartexe-public-address-primary"></use>
                </svg>
                <div class="name">公众号</div>
                <div class="code-name">#icon-smartexe-public-address-primary</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartzhongzhimima"></use>
                </svg>
                <div class="name">重置密码</div>
                <div class="code-name">#icon-smartzhongzhimima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttianchongxing-"></use>
                </svg>
                <div class="name">电话呼叫</div>
                <div class="code-name">#icon-smarttianchongxing-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarticon-person-renwu"></use>
                </svg>
                <div class="name">icon-person-renwu</div>
                <div class="code-name">#icon-smarticon-person-renwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartde-isolation"></use>
                </svg>
                <div class="name">de-isolation</div>
                <div class="code-name">#icon-smartde-isolation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttabtubiao-"></use>
                </svg>
                <div class="name">tab_开门_02</div>
                <div class="code-name">#icon-smarttabtubiao-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smarttabtubiao-1"></use>
                </svg>
                <div class="name">tab_开门_04</div>
                <div class="code-name">#icon-smarttabtubiao-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartlixian"></use>
                </svg>
                <div class="name">离线</div>
                <div class="code-name">#icon-smartlixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartzaixian"></use>
                </svg>
                <div class="name">在线</div>
                <div class="code-name">#icon-smartzaixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartliebiaoqiehuan"></use>
                </svg>
                <div class="name">列表切换</div>
                <div class="code-name">#icon-smartliebiaoqiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smartshaixuan1"></use>
                </svg>
                <div class="name">筛选</div>
                <div class="code-name">#icon-smartshaixuan1</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
